<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  jQ day04

  1 jQ获取元素尺寸的方法
  获取元素的宽度高度 width() height()
  获取元素的宽度高度+padding innerwidth() innerheight()
  获取元素的宽度高度+padding+border outerwidth() outereight()
  获取元素的宽度高度+padding+border+margin outerwidth(true) outereight(true)

  2jQ获取元素位置
  offset() 返回的是一个对象 里面有top 和left 元素距离页面顶部或者左部的距离 与定位 可视窗口都没关系 参照文档 可获取可修改
  position()返回的是一个对象 返回有定位父级距离父级顶部左部的距离 如果没有定位的父级 就参照文档 可获取不可修改
  scrollTop() 可读写
  滚动也一般搭配的页面滚动事件 页面滚动的距离$(document).scrollTop()
  $('html,body').animate({scrollTop:0}) 记住做动画的是html 不是document

  3on绑定事件的优势
  绑定多个事件 $(div).on({
  click:function(){},
  mouseenter:function(){},
  mouseleave:function(){}
  })

  如果事件处理的逻辑一样 还可以这么玩 $(div).on('mouseenter,mouseleave',function(){这里面的逻辑是相同的})

  可以事件委托 提升性能 减少事件注册的次数
  $('ul').on('click','li',function(){})

  可以给未来动态创建的元素进行监听
  $('ul').on('click','li',function(){})
  let li =$('<li>我是后来创建的</li>>') //此时后面追加的这个li身上也有点击事件的监听
  $('ul').append(li)

  4off解绑事件
  $(div).off() 这个jq对象div身上的所有事件都被移出了
  $(div).off('click') 这个jq对象div身上的点击事件被移出了
  事件委派解绑
  $('ul').off('click','li')

  5jQ提供自动触发的方法
  element.事件名() eg:$(div).click()
  $(div).trigger('click')
  $(div).triggerHandler('click') 不会触发元素的默认行为
  one() 只会触发一次的方法

  6jq事件对象 基本上与原生一样
  还可以通过事件对象做事件委托
  键盘事件的监听
  e.preventDefault()
  阻止冒泡
  e.stopPropagation()

</body>

</html>